<template>
  <div>
    <el-container class="layout-container-demo" style="height: auto">
      <el-aside width="200px">
        <el-menu :default-openeds="['1', '2']" :default-active="active">
          <el-menu-item index="1" @click="toHome">
            <template #title>
              <el-icon>
                <house/>
              </el-icon>
              <b>主页</b>
            </template>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Connection/>
              </el-icon>
              <b>连接</b>
            </template>
            <el-menu-item-group title="硬件信息">
              <el-menu-item index="2-1" @click="toInformation">摄像头信息</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="调试工具">
              <el-menu-item index="2-2" @click="toHardwareConnection">硬件连接测试</el-menu-item>
              <el-menu-item index="2-3" @click="toHardwareFunction">硬件功能测试</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <setting/>
              </el-icon>
              <b>设置</b>
            </template>
            <el-menu-item-group title="摄像头设置">
              <el-menu-item index="3-1" @click="toSetTimer">定时设置</el-menu-item>
              <el-menu-item index="3-2" @click="toAlertSetting">预警设置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="数据设置">
              <el-menu-item index="3-3" @click="toTypeSetting">模板管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
         <Header></Header>
        </el-header>
        <el-main>
          <component :is="mainComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import {defineComponent, ref} from "vue";
import Table from "@/Component/Table.vue";
import {Connection, House, Setting} from "@element-plus/icons-vue";
import ChangeButton from "@/Component/ChangeButton.vue";
import Header from "@/Component/Header.vue";
import Information from "@/Component/Infomation.vue";
import HardwareConnectionTest from "@/Component/HardwareConnectionTest.vue";
import HardwareFunctionTest from "@/Component/HardwareFunctionTest.vue";
import AlertSetting from "@/Component/AlertSetting.vue";
import TypeSetting from "@/Component/TypeSetting.vue";
import SetTimer from "@/Component/SetTimer.vue";

let mainComponent=ref('Table');
export default defineComponent({
  components: {
    Header,
    Table,
    HardwareConnectionTest,
    HardwareFunctionTest,
    SetTimer,
    AlertSetting,
    TypeSetting,
    Information,
    ChangeButton,
    Setting, Connection, House
  },
  setup(){
    // const mainComponent=ref('Table');
    mainComponent.value='Table'; //默认组件为Table
    return{
      mainComponent
    }
  }
  ,
  methods:{
    toInformation(){
      mainComponent.value='Information';
    },
    toHome(){
      mainComponent.value='Table';
    },
    toHardwareConnection(){
      mainComponent.value='HardwareConnectionTest';
    },
    toHardwareFunction(){
      mainComponent.value='HardwareFunctionTest';
    },
    toSetTimer(){
      mainComponent.value='SetTimer';
    },
    toAlertSetting(){
      mainComponent.value='AlertSetting';
    },
    toTypeSetting(){
      mainComponent.value='TypeSetting';
    }

  },
  data(){
    return {
      active: '1', // 设置默认选中项的值为 '1'
      user: '管理员'
    };
  }
})


</script>


<style scoped>
el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
el-main {
  padding: 0;
}
el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

el-menu {
  border-right: none;
}
</style>

